<template>
    <!--    修改密码的dialog-->
    <el-dialog v-model="dialogVisible" width="45%" title="修改密码" align-center destroy-on-close @closed="dialogClosed">
        <el-row justify="center">
            <el-col :span="18">
                <el-alert style="margin-bottom: 18px" type="warning" title="新密码长度8-20位，由字母和数字组成，不能出现中文和特殊字符。" show-icon :closable="false"></el-alert>
                <el-form size="large" :rules="passwordRules" ref="changePasswordDialog" :model="changePasswordDialogForm">
                    <el-form-item label="原始密码" prop="curr_pw">
                        <el-input show-password v-model="changePasswordDialogForm.curr_pw" placeholder="请输入您的原始密码"></el-input>
                    </el-form-item>
                    <el-form-item label="新的密码" prop="new_pw">
                        <el-input show-password v-model="changePasswordDialogForm.new_pw" placeholder="请输入您的新密码"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="new_pw_verify">
                        <el-input show-password v-model="changePasswordDialogForm.new_pw_verify" placeholder="请再次输入新密码"></el-input>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="changePasswordSubmit">提交</el-button>
          </span>
        </template>
    </el-dialog>
</template>

<script>
import {ElMessage} from "element-plus";
import useStore from "@/store/store";
const store = useStore()
export default {
    name: "ChangePassword",
    props: {
        isDomDialog: {type: Boolean}
    },
    watch: {
        isDomDialog(value) {
            this.dialogVisible = value
        }
    },
    data() {
        return {
            dialogVisible: false,
            changePasswordDialogForm: {
                curr_pw: '',
                new_pw: '',
                new_pw_verify: ''
            },
            passwordRules: {
                curr_pw: [
                    { required: true, message: '请输入原始密码', trigger: 'blur' }
                ],
                new_pw: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    {min: 8, max: 20, message: '密码长度为8-20位', trigger: 'blur'},
                    {pattern: /^[a-zA-z0-9]+$/, message: '请确认密码的合法性', trigger: 'blur'}
                ],
                new_pw_verify: [
                    { required: true, message: '请输入确认密码', trigger: 'blur' },
                    {
                        trigger: ['blur', 'change'],
                        validator: (rule, value, callback) => {
                            if (this.changePasswordDialogForm.new_pw !== value) {
                                callback(new Error('两次密码不一致，请重新输入'))
                            } else {
                                callback()
                            }
                        }
                    }
                ]
            }
        }
    },
    methods: {
        changePasswordSubmit() {
            this.$refs.changePasswordDialog.validate((validate, message) => {
                if (!validate) return false
                this.changePasswordPush()
            })
        },
        changePasswordPush() {
            const {new_pw, curr_pw} = this.changePasswordDialogForm
            this.$api.pushChangePasswordData({
                user_id: store.user_id,
                curr_pw,
                new_pw,
            }).then(
                response => {
                    switch (response.data.update_status) {
                        case 0:
                            ElMessage.error('密码修改失败')
                            this.changePasswordDialogForm.curr_pw = ''
                            break;
                        case 1:
                            ElMessage.success('密码修改成功')
                            this.dialogVisible = false
                            break;
                        case 2:
                            ElMessage.warning('当前密码错误，请重新输入')
                            this.changePasswordDialogForm.curr_pw = ''
                            break;
                        default:
                            ElMessage.error('超出预期的值' + response.data.update_status)
                    }
                },
                error => {
                    ElMessage.error(error.message)
                }
            )
        },
        // 关闭对话框后，向父组件传递时事件，使父组件的状态修改
        dialogClosed() {
            this.$emit('DialogClosed', false)
        }
    }
}
</script>

<style scoped>

</style>